<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/car.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/head.css">
    <link rel="stylesheet" href="../css/foot.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        table,
        thead,
        table,
        tr,
        td,
        th {
            margin: 0;
            padding: 0;
        }
        
        table,
        tbody,
        thead,
        tr,
        th,
        td {
            border: 1px solid;
            text-align: center;
        }
        
        td {
            padding: 3px;
        }
        
        td>img {
            width: 80px;
            height: 50px;
        }
        
        .jia {
            padding: 5px;
        }
        
        .jian {
            padding: 5px;
        }
        
        .txt {
            width: 100px;
            height: 25px;
        }
    </style>
</head>

<body>
    <div class="d-head"></div>
    <div class="d-box">
        <div class="d-tri1"></div>
        <p class="d-txt"><span>您的购物车暂无商品，赶紧<a href="list.html">选购</a>吧</span></p>
        <p class="d-title"><span>商品</span><span>价格</span><span>数量</span><span>操作</span></p>
        <ul class="d-list">
            <!-- <li>
                <input type="checkbox" class="dx">
                <img src="../images/noprc.png" alt="">
                <h3>哈哈哈哈哈</h3>
                <span>￥288</span>
                <input class="reduce" type="button" value="-">
                <i></i>
                <input class="add" type="button" value="+">
                <b>删除</b>
            </li> -->
        </ul>
        <div class="d-sum">
            <hr><br>
            <input id="checkboxAll" type="checkbox">
            <label for="checkboxAll">全选</label>
            <span>共 <i>0</i> 件商品，总计：￥<strong></strong></span>
            <input type="button" value='去结算'>
            <br>
        </div>
    </div>
    <div class="d-footer"></div>
    <script src="../jquery-1.9.1/jquery-1.9.1.min.js"></script>
    <script src="../js/ajax.js"></script>
    <script>
        $('.d-head').load('head.html')
        $('.d-footer').load('foot.html')
    </script>

    <script>
        let arr = JSON.parse(localStorage.getItem('shopArr'))
        let dList = document.querySelector('.d-list')
        if (arr === null) {
            $('.d-txt').show();
            $('.d-sum').css('display', 'none');
            $('.d-title').css('display', 'none');
        } else {
            $('.d-txt').css('display', 'none');
            $('.d-sum').show();
            $('.d-title').show();
            // 渲染数据
            arr.forEach(function(ele) {
                let str = `<li data-id="${ele.id}">
                <input type="checkbox" class="dx">
                <img src="${ele.img}" alt="">
                <h3>${ele.title}</h3>
                <span>${ele.price}</span>
                <input class="reduce jian" type="button" value="-">
                <i>${ele.count}</i>
                <input class="add jia" type="button" value="+">
                <b class='d-del' id="xs">删除</b>
            </li>`
                dList.innerHTML += str
            })
        }
        // 全选按钮

        $('#checkboxAll').click(function() {

            // 当前复选框的属性

            var status = $(this).prop('checked')

            // 选中的属性

            $('.dx').prop('checked', status)

            zj() //调用总价

        })

        //判断当前的全选按钮是否选中

        function check_all() {

            //获取class为dx的所有的复选框的个数

            var dx = $(".dx").length;


            //	获取选中的复选框的个数

            var dx1 = $(".dx:checked").length;


            if (dx == dx1) {

                $("#checkboxAll").prop("checked", true);

            } else {

                $("#checkboxAll").prop("checked", false);

            }

        }

        //给按钮绑定点击事件，调用全选按钮的判断条件

        $(".dx").click(function() {

            check_all();


            zj(); // 总价

        })



        // 选中删除

        $('#xs').click(function() {

            // 遍历复选框是否选中

            $('.dx').each(function(index, ele) {

                // 如果复选框属性等于true

                if ($(ele).prop('checked') == true) {

                    // 当前元素的父元素的父元素删除

                    $(this).parent().remove()

                }

            })

            zj() // 总价

        })


        // 清空购物车

        // $('#qk').click(function() {

        // 删除tbody

        // $('tbody').empty();

        // })



        // 减

        $('.jian').click(function() {

            // 获取当前元素的下一个兄弟元素的val值

            var num = parseInt($(this).next().text());

            num--;

            if (num <= 1) {

                num = 1;

            }

            // 当前元素的下一个兄弟元素val值是num

            $(this).next().text(num)

            zj() // 总价

        })


        // 加

        $('.jia').click(function() {

            // 获取当前元素的上一个兄弟元素的val值

            var num = parseInt($(this).prev().text());

            num++;

            // 当前元素的上一个兄弟元素的val值为num

            $(this).prev().text(num)

            zj() // 总价

        })



        // 删除

        $('.d-del').click(function() {

            // 当前父元素的父元素删除

            $(this).parent().remove();

            zj() // 总价

        })


        // 总价

        function zj() {

            var zj = 0.00; //商品总价

            var sl = 0; //选中商品数量

            $('.dx:checked').each(function() {

                // 单价

                var dj = $(this).parent().children().eq(3).text();


                // 商品数量

                var num = $(this).parent().children().eq(5).text();


                // 总价

                zj += num * dj;


                //数量

                sl += parseInt(num);



            })

            // 选中商品的总数量

            $('.d-sum i').eq(0).text(sl);

            // 总计商品的总价格

            $('.d-sum strong').eq(0).text(zj.toFixed(2));


            // 遍历选中商品

            // $('.dx').each(function() {


            // 单价
            var p = $('li span').text().slice(1) - 0

            // var dj = $(this).parent().eq(3).text();
            // console.log($(this).parent().eq(3))

            // console.log(dj)
            // console.log(p)


            //商品数量

            var num = ($('li i').text()) - 0;
            // console.log(num)


            // 总价

            // var totals = num * p;

            // console.log(totals)


            // $(this).parent().nextAll().eq(0).children().eq(4).children().eq(1).text(totals.toFixed(2))
            // console.log($(this))
            // console.log($(this).parent().nextAll().eq(0).children().eq(4).children().eq(1))
            $('.d-sum strong').html(num * p)
                // console.log($('.d-sum strong').html)
                // console.log($('d-sum strong'))
                // })

        }

        zj()
    </script>

</body>

</html>